<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name" v-if="addressData">{{addressData.person}}</text>
						<text class="mobile" v-if="addressData">{{addressData.phone}}</text>
					</view>
					<text class="address" v-if="addressData">{{addressData.address}} {{addressData.area}}</text>
					<text class="address" v-if="!addressData">请添加收货地址</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image class="a-bg"
				src="">
			</image>
		</navigator>

		<view class="goods-section" v-if="goodsInfo.ptBuy && ptInfo">
			<view class="g-header b-b">
				<text class="name">拼团购买</text>
			</view>
			<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-margin">
				<view class="tn-flex tn-text-center" style="width: 100%;">
					<text class="tn-flex-basic-full" v-if="ptInfo.missNum > 0"> 还差 <text style="color: red;"> {{ ptInfo.missNum }}人 </text> 拼团成功，剩余时长 <tn-count-down :timestamp="ptInfo.expireTime" :showDays="true" :showHours="true"fontColor="#fe0000"></tn-count-down>
					</text>
					<text class="tn-flex-basic-full" v-else>恭喜拼团满员~</text>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-margin tn-flex-row-between" style="width: 60%;">
					<view class="tn-flex tn-flex-direction-column tn-text-center" v-for="(pt,index) in ptInfo.members">
						<tn-avatar :src="pt.avatar" :badge="pt.role == '团长'" :text="pt.text" badgeIcon="vip"
							badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40"
							:badgePosition="[-8, 18]" size="lg">
						</tn-avatar>
						<view v-if="pt.role">
							{{ pt.role }}
						</view>
						<tn-count-down :timestamp="pt.expireTime" :showDays="false" :showHours="false"
							fontColor="#fe0000" v-if="pt.expireTime"></tn-count-down>

					</view>

				</view>
			</view>
		</view>

		<view class="goods-section">
			<view class="g-header b-b">
				<text class="name">购买商品清单</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(spec,index) in specList" :key="index">
				<view class="tn-flex tn-flex-direction-column tn-flex-center tn-flex-col-center">
					<image :src="spec['img']['tempFilePath'] || goodsInfo.thumbs[0]"></image>
					<view v-if="spec.img.oImgOk == 'ing' && spec.img.cImgOk == 'ing'" size="sm" style="color:lightgray;font-size: 0.8em;">上传中...<tn-loading color="#AAAAAA" mode="circle"></tn-loading></view>
					<tn-button size="sm" backgroundColor="tn-bg-blue" :plain="true" shape="round" @tap="autoUploadImgs(spec.img)" v-if="spec.img.oImgOk==false || spec.img.cImgOk==false">上传图片</tn-button>
				</view>
				<view class="right">
					<text class="title clamp">{{goodsInfo.name}}</text>
					<text class="spec" v-if="spec.specItems && spec.specItems.length > 0"> 尺寸 {{ spec.specItems[0]['value']}} {{ spec.specItems[0]['unit']}} </text>
					<view v-if="goodsInfo.ptBuy">
						<view class="price-box" style="text-decoration:line-through;">
							<text class="price" style="font-size: 0.7em;">￥{{spec.price}}/件 x {{buyCnt}} 份 (1份{{ spec.minCnt }}件)</text>
						</view>
						<view class="price-box">
							<text class="price" style="color: red;">￥{{ showItemPrice(spec) }}<text
									style="font-size: 0.6em;">/件</text></text>
							<text class="number">x {{buyCnt}} 份 (1份{{ spec.minCnt }}件)</text>
						</view>
					</view>
					<view class="price-box" v-else>
						<text class="price" style="color: red;">￥{{ showItemPrice(spec) }}<text
								style="font-size: 0.6em;">/件</text></text>
						<text class="number">x {{buyCnt}} 份 (1份{{ spec.minCnt }}件)</text>
					</view>

				</view>
			</view>

		</view>

		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip" v-if="amount">￥{{amount.originalAmount}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip" v-if="amount">{{ amount.shippingAmount>0 ? `￥${amount.shippingAmount}`:"免运费"}}</text>
			</view>
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="mark" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content tn-padding-right" style="width:100%">
				<view class="tn-flex tn-flex-direction-column  ">
					<view class="tn-flex tn-text-right tn-flex-row-right tn-flex-col-center">
						<text>{{ goodsInfo.ptBuy ? '拼团价' : '实付款' }}</text>
						<text class="price-tip">￥</text>
						<text class="price" style="font-size: 1.6em;" v-if="amount">{{amount.payAmount}}</text>
					</view>
					<view class="tn-flex tn-text-right tn-flex-row-right tn-flex-col-center"
						v-if="amount && amount.promotionAmount > 0">
						<text class="price" style="font-size: 0.8em;">共减</text>
						<text class="price price-tip" style="font-size: 0.8em;">￥</text>
						<text class="price" style="font-size: 1em;">{{amount.promotionAmount}}</text>
					</view>
				</view>
			</view>
			<button class="submit" @click="submit">提交订单</button>
		</view>


	</view>
</template>

<script>
	import api from '../../common/api.js'
	// 这个是h5的上传方式
	import * as qiniu from '../../common/qiniu.min.js'
	// 这个是小程序的上传方式
	const qiniuUploader = require("../../common/qiniuUploader");
	export default {
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				payType: 1, //1微信 2支付宝
				addressData: null, // 用户地址信息

				currentUser: {}, // 当前用户
				goodsInfo: {}, //下单信息
				buyCnt: 0, // 购买数量
				specInfo: null, // 选择的尺寸; 如果有买赠，则再这内部，有一个 giftSpecInfo 对象
				amount: null,
				mark: '', // 订单备注信息
				specList: [],
				imgUploadSucceedNum: 0, // 已经成功上传的图片数量
				imgUploadOver: true, // 已经成功上传的图片数量
				imgUploadTargetNum: 0, // 需要上传的图片数量
				ptInfo: null,
				ignoreUploadImg: true,
				qnConfigInit: false, // 七牛的配置是否已经配置了
			}
		},
		onLoad(option) {
			this.currentUser = this.$API.getUserInfoFromCache();
			console.log('当前登录用户信息:', this.currentUser);
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendPayGoods', (data) => {
				console.log('接收的信息:', data);
				this.goodsInfo = data.goodsInfo;
				this.buyCnt = data.buyCnt; // 购买的份数
				if (!data.goodsInfo.specList || data.goodsInfo.specList.length == 0) {
					this.specList = [{
						price: this.goodsInfo.price,
						discountPrice: this.goodsInfo.discountPrice,
						minCnt: this.goodsInfo.minCnt,
						img: [],
					}];
					this.imgUploadTargetNum = 0;
					this.imgUploadSucceedNum = 0;
					this.ignoreUploadImg = true;
				} else {
					let index = 0;
					for (let item of data.sizeList) {
						data.goodsInfo.specList[index]['img'] = item;
						index += 1;
						this.autoUploadImgs(item)
					}
					this.specList = data.goodsInfo.specList;
					this.imgUploadTargetNum = data.sizeList.length * 2;
					this.ignoreUploadImg = false;
				}
				
				// 下单过来时，选中的是非拼团下单模式
				this.goodsInfo.ptBuy = data.ptEnable;
				if (this.goodsInfo.ptBuy) {
					// 补齐拼团信息
					let ptItem = data.ptItem; // this.goodsInfo.ptOrderDtoList;
					if (!ptItem) {
						// 开团场景
						const ptNum = this.goodsInfo.ptNum;
						let ptList = [{
							'uid': this.currentUser.userId,
							'nickName': this.currentUser.nickName,
							'avatar': this.currentUser.avatar,
							'role': '团长',
							'expireTime': this.goodsInfo.payExpireMin * 60,
							'status': 0
						}, ]
						for (let i = 1; i < ptNum; i++) {
							ptList.push({
								'text': "?",
								'expireTime': null
							})
						}
					
						this.ptInfo = {
							'ptOrderId': null,
							'num': ptNum, // 总的拼团人数
							'missNum': ptNum - 1, // 缺少的人数
							'expireTime': this.goodsInfo.ptTimePeriod * 60 - 1, // 拼团结束时间
							'members': ptList
						}
					} else {
						// 参团场景
						const ptNum = this.goodsInfo.ptNum;
						let ptList = []
						let index = 0;
						for (let mem of ptItem.members) {
							ptList.push({
								'uid': mem.userId,
								'nickName': mem.nickName,
								'avatar': mem.avatar,
								'role': index == 0 ? '团长' : '',
								'expireTime': mem.status == 10 ? parseInt((mem.expireTime - new Date().getTime()) / 1000) : 0, // 失效时间
								'status': mem.status
							})
							index += 1;
						}
						ptList.push({
							'uid': this.currentUser.userId,
							'nickName': this.currentUser.nickName,
							'avatar': this.currentUser.avatar,
							'role': '我',
							'expireTime': this.goodsInfo.payExpireMin * 60,
						})
						this.ptInfo = {
							'ptOrderId': ptItem.ptOrderId,
							'num': ptNum, // 总的拼团人数
							'missNum': ptNum - ptList.length, // 缺少的人数
							'expireTime': parseInt((ptItem.endTime - new Date().getTime()) / 1000), // 拼团结束时间
							'members': ptList
						}
					}
				} else {
					this.ptInfo = {};
				}
				

				this.calculateAmountInfo(this.goodsInfo.ptEnable, this.goodsInfo.ptBuy);
				console.log('数据初始化完成! --》', this.specList, "拼团信息:", this.ptInfo);
			})
		},
		onShow() {
			if (!this.addressData) {
				// 获取默认的收货地址
				this.address();
			}

			// 注册地址选择的回调
			let _this = this;
			uni.$on('addrChoose', function(data) {
				_this.addressData = data;
			});
		},
		watch: {
			imgUploadSucceedNum: {
				handler(val) {
					let num = 0
					for (let spec of this.specList) {
						if (spec.img.oImgOk == true) {
							num += 1;
						}
						if (spec.img.cImgOk == true) {
							num += 1;
						}
					}
					this.imgUploadOver = num >= this.imgUploadTargetNum;
					console.log('图片都已经上传完了？', this.imgUploadOver);
				},
				immediate: true
			}
		},
		methods: {
			showItemPrice(spec) {
				if (!this.goodsInfo || !spec) {
					return "--";
				}
				
				if (this.goodsInfo.ptEnable && !this.goodsInfo.ptBuy) {
					// 拼团商品，直接购买，显示原价
					return spec.price;
				}
				if (spec.discountPrice) {
					return spec.discountPrice;
				}
				return spec.price;
			},
			async address() {
				// 查询默认的地址列表
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchUserMainAddress(),
					method: "get",
					data: {},
					dataType: 'json',
					success: function(result, status) {
						_this.addressData = result;
						console.log('地址列表: {}', _this.addressData);
					},
				});
			},
			calculateAmountInfo(ptGoods, ptBuy) {
				console.log('计算金额相关信息:', this.specList);
				let orderAmount = 0, originalAmount = 0, ptAmount = 0;
				for (let spec of this.specList) {
					originalAmount += spec.price * spec.minCnt * this.buyCnt;
					orderAmount += (spec.discountPrice || spec.price) * spec.minCnt * this.buyCnt;
				}
				if (ptGoods && !ptBuy) {
					// 拼团商品，直接购买，此时订单价格 = 原始价格
					ptAmount = orderAmount;
					orderAmount = originalAmount;
				}

				originalAmount = parseFloat(originalAmount.toFixed(2))
				orderAmount = parseFloat(orderAmount.toFixed(2))
				// 计算金额相关信息
				let amountInfo = {
					'shippingAmount': 0, // 运费
					'orderAmount': orderAmount, // this.specInfo.discountPrice * this.buyCnt, //下单金额
					'originalAmount': originalAmount, // this.specInfo.price * this.buyCnt, // 原始金额
					'payAmount': orderAmount, // this.specInfo.discountPrice * this.buyCnt, // 支付金额
					'ptAmount': ptAmount,
				}

				amountInfo['promotionAmount'] = amountInfo['originalAmount'] - amountInfo['orderAmount']; // 优惠金额
				this.amount = amountInfo;
				console.log('计算之后的金额信息:', this.amount)
			},
			async submit() {
				if (!this.addressData || !this.addressData.person) {
					this.$t.message.toast("请选择收件人信息");
					return;
				}

				// 创建订单，返回唤起支付的preSignid
				let data = {
					orderAmount: this.amount.orderAmount,
					originalAmount: this.amount.originalAmount,
					shippingAmount: this.amount.shippingAmount,
					payAmount: this.amount.payAmount,
					remark: this.mark,
					receivingPerson: this.addressData.person,
					receivingPhone: this.addressData.phone,
					receivingArea: this.addressData.area,
					receivingAddress: this.addressData.address,
					type: this.goodsInfo.ptBuy ? 10 : 0, // 10 拼团购买 0 直接购买
					ptOrderId: this.ptInfo.ptOrderId, // 拼团单
					ptGoods: this.goodsInfo.ptEnable // 判断是否为拼团商品下单
				}

				let itemList = []
				let cnt = 0;
				while (!this.ignoreUploadImg) {
					itemList = []
					let allImgUploaded = true;
					for (let spec of this.specList) {
						if ((!spec.img['oImgOk']) || (!spec.img['cImgOk'])) {
							// 图片没有上传，则等待图片上传成功
							await this.autoUploadImgs(spec.img)
							allImgUploaded = false;
							continue;
						}
						
						if (!spec.img.oImg || !spec.img.cImg) {
							// 图片没有上传，则等待图片上传成功
							await this.autoUploadImgs(spec.img)
							allImgUploaded = false;
							continue;
						}

						
						// 图片上传成功
						let oImg = [spec.img.oImg]
						let cImg = [spec.img.cImg]
						itemList.push({
							goodsId: this.goodsInfo.goodsId,
							goodsName: this.goodsInfo.name,
							goodsIntro: this.goodsInfo.intro,
							goodsThumb: this.goodsInfo.thumbs[0],
							goodsPrice: spec.price,
							orderPrice: spec.discountPrice,
							buyCnt: this.buyCnt,
							orderQuantity: this.buyCnt * spec.minCnt,
							originalImgs: oImg,
							uploadImgs: cImg,
							specId: spec.specId,
							spec: spec.spec,
							remark: this.remark
						})
					}

					if (allImgUploaded) {
						break;
					}
					cnt += 1;
					if (cnt > 5) {
						console.log('重试5次，图片依然上传不了')
						uni.showToast({
							title: "图片还未上传成功哦~",
							duration: 1500,
							icon: 'none',
						});
						return
					}
				}
				if (itemList.length == 0) {
					itemList.push({
						goodsId: this.goodsInfo.goodsId,
						goodsName: this.goodsInfo.name,
						goodsIntro: this.goodsInfo.intro,
						goodsThumb: this.goodsInfo.thumbs[0],
						goodsPrice: this.goodsInfo.price,
						orderPrice: this.goodsInfo.discountPrice,
						orderQuantity: this.buyCnt * this.goodsInfo.minCnt,
						remark: this.remark
					})
				}
				data['itemList'] = itemList;

				console.log("下单请求参数如👉", data)
				uni.showLoading({
					title: '订单提交中，请稍后'
				})
				let _this = this;
				this.$Net.req({
					url: this.$API.execAddOrder(),
					method: "post",
					data: data,
					header: {
						'Content-Type': 'application/json'
					},
					dataType: 'json',
					success: function(result, status) {
						// 下单成功，在这里唤醒支付； 
						console.log('订单添加结果: {}', result);
						if (status.code == 0) {
							// 下单成功，直接进入订单列表； 使用 redirectTo 不允许回退到订单创建页面
							_this.pay(result)
						}
					},
					complete: function() {
						// 因此等待窗口
						uni.hideLoading();
					}
				});
			},

			async autoUploadImgs(item) {
				// 小程序方式上传
				let _this = this;
				let fileName = this.$API.buildUploadImgPath();
				let orgFile = fileName + 'org.png';
				let cutFile = fileName + 'cut.png';
				
				console.log("准备上传文件: ", item, fileName);
				this.initQiniu()
				
				if (!item['oImgOk']) {
					item.oImgOk = 'ing'
					qiniuUploader.upload(item.originalImg, (res) => {
							console.log(`${orgFile} 上传完成:`, res);
							item.oImgOk = true;
							item.oImg = res.fileURL;
							_this.imgUploadSucceedNum += 1;
						}, (error) => {
							console.log('上传失败: ->', error);
							item.oImgOk = false;
						}, {
							region: 'SCN', // 华南
							uptokenURL: this.$API.fetchImgUploadToken(),
							domain: this.$API.imgHost(),
							shouldUseQiniuFileName: false,
							qiniuBucketURLPrefix: '',
							key: orgFile
						},
						(progress) => {
							// 这里是上传的进度情况
							console.log('上传进度', orgFile, progress.progress);
							console.log('已经上传的数据长度', orgFile, progress.totalBytesSent);
							console.log('预期需要上传的数据总长度', orgFile, progress.totalBytesExpectedToSend);
						})
				}
				
				if (!item['cImgOk']) {
					item.cImgOk = 'ing'
					qiniuUploader.upload(item.tempFilePath, (res) => {
							console.log(`${cutFile} 上传完成:`, res);
							item.cImgOk = true;
							item.cImg = res.fileURL;
							_this.imgUploadSucceedNum += 1;
						}, (error) => {
							item.cImgOk = false;
							console.log('上传失败: ->', error);
						}, {
							region: 'SCN', // 华南
							uptokenURL: this.$API.fetchImgUploadToken(),
							domain: this.$API.imgHost(),
							shouldUseQiniuFileName: false,
							qiniuBucketURLPrefix: '',
							key: cutFile
						},
						(progress) => {
							// 这里是上传的进度情况
							console.log('上传进度', cutFile, progress.progress);
							console.log('已经上传的数据长度', cutFile, progress.totalBytesSent);
							console.log('预期需要上传的数据总长度', cutFile, progress.totalBytesExpectedToSend);
						})
				}
			},

			// 初始化七牛云相关配置
			initQiniu() {
				if (this.qnConfigInit) {
					return;
				}
				var options = {
					// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
					region: 'SCN',

					// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
					// 由其他程序生成七牛云uptoken，然后直接写入uptoken
					uptoken: '',
					// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
					uptokenURL: this.$API.fetchImgUploadToken(),
					// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
					uptokenFunc: function() {
						// do something
						return qiniuUploadToken;
					},

					// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
					domain: 'http://[yourBucketId].bkt.clouddn.com',
					// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
					// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
					// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
					// 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
					shouldUseQiniuFileName: false
				};
				// 将七牛云相关配置初始化进本sdk
				qiniuUploader.init(options);
				this.qnConfigInit = true;
			},


			pay(payment) {
				// 唤起微信支付
				console.log(payment)
				if (payment.prePayId) {
					let _this = this
					let prePayInfo = payment.prePayInfo;
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: prePayInfo.nonceStr,
						package: prePayInfo.prePackage,
						paySign: prePayInfo.paySign,
						signType: prePayInfo.signType,
						timeStamp: prePayInfo.timeStamp,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							if (res['errMsg'] == 'requestPayment:ok') {
								_this.$api.msg('支付成功')
								// 支付成功，请求后端接口，将订单状态设置为支付成功
								_this.$Net.req({
									url: _this.$API.execPaying(),
									data: {
										'orderId': payment.orderId,
									},
									dataType: 'json',
									success: function(result, status) {
										// 更新成功
										console.log("标记为支付成功")
										_this.$api.msg('支付成功')
									},
									complete: function() {
										setTimeout(() => {
											// 进入订单详情
											uni.reLaunch({
												'url': '/pages/order/order'
											})
										}, 800)
									}
								})
							} else {
								_this.$api.msg('支付未完成，请到列表完成支付吧~')
								setTimeout(() => {
									// 进入订单详情
									uni.reLaunch({
										'url': '/pages/order/order'
									})
								}, 800)
							}
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							this.$t.message.toast("唤起微信支付失败，请到订单列表完成支付吧~");
							setTimeout(() => {
								// 进入订单详情
								uni.reLaunch({
									'url': '/pages/order/order'
								})
							}, 100)
						}
					});
				} else {
					this.$t.message.toast("唤起微信支付失败，请到订单列表完成支付吧~");
					// 唤起支付失败，直接进入订单详情
					uni.reLaunch({
						'url': '/pages/order/order'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 120upx;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}

		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 120upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $base-color;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: $base-color;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
			border-radius: 0;
		}
	}
</style>